<style scoped>
  .rank-wrap {
    width: 100vw;
    overflow: hidden;
  }

  .rank-title {
    font-size: 5vw;
    padding-top: 2vh;
    width: 120vw;
    margin-left: -10vw;
    margin-bottom: -14vh;
    text-align: center;
    padding-bottom: 15vh;
    border-radius: 0 0 27vw 27vw;

  }



  .item-rank-top {
    width: 8vw;
    height: 8vw;
  }

  .item-rank-head_img {
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    margin-left: 2vw;
    box-sizing: content-box;
    margin-right: 2vw;
  }

  .rank-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw 2vw;
  }
  .item-left {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  span.item-rank-num {
    width: 8vw;
    text-align: center;
    font-size: 4.5vw;
  }
  .rank-active-wrap {
    background: white;
    margin: 2vw 5vw;
    border-radius: 2vw;
  }
  .item-right {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 20vw;
  }
  span.item-vote-num {
    margin-left: 1vw;
    font-size: 4.5vw;
  }
  .show-more{
    padding:2vw;
    border-radius: 5vw;
    margin: 2vw 10vw;
    text-align: center;
  }
  .first-player {
    font-size: 5vw;
    text-align: center;
    margin-bottom: 2vh;
    border-radius: 2vw;
  }
</style>
<template>
  <div class="rank-wrap" v-if="mainData!=null">
    <div class="rank-title"
         :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">
      <i class="iconfont icon-xibaotubiao-copy" style="font-size: 9vw"></i>
    </div>
    <div v-if="players!=null"  class="first-player" :style="{color: (mainData.page.btn_font_color+'!important')}" >
      <div style="font-size: 4vw;">
        <div style="font-size: 5.5vw;margin: 2vw;">{{players[0].player_name}}</div>
        <div>荣获第一名!</div>
      </div>
      <div><van-rate
        :value="5"
        :size="25"
        void-icon="star"
        void-color="#eee"
      />
      </div>
    </div>

    <div class="rank-active-wrap" :style="{color: (mainData.page.font_color+'!important')}">
      <div class="rank-item" v-for="(item,index) in  players">
        <div class="item-left">
          <img class="item-rank-top" v-if="index<3"
               :src="'http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/rank_'+index+'.png'">
          <span v-else class="item-rank-num">{{index+1}}</span>
          <img class="item-rank-head_img" :src="GLOBAL.getUrl(item.imgs[0],true)">
          <span class="item-rank-name">{{item.player_name}}</span>
        </div>
        <div class="item-right">
          <van-icon name="gem" :color="mainData.page.btn_color" size="6vw"/>
          <span class="item-vote-num" :style="{color: (mainData.page.btn_color+'!important')}">{{item.total_vote_num}}</span>
        </div>
      </div>
    </div>
    <div v-if="more" @click="getPlayerData" class="show-more" :style="{color: (mainData.page.btn_font_color+'!important'),background:mainData.page.btn_color}">
      查看更多...
    </div>
  </div>

</template>
<script>
  import { getActive } from '@/api/active'
  import { getResultPlayers } from '@/api/play'
  import { getActiveId } from '@/libs/util'

  export default {
    name: 'rank',
    data () {
      return {
        id: null,
        mainData: null,
        myData: null,
        more:true,
        players: [],
      }
    },
    created () {
      this.id = getActiveId();
      this.initData()
    },
    methods: {

      initData () {
        try {
          let mainData = this.GLOBAL.getMainData()
          if (mainData == null || !mainData) {
            this.getData()
          } else {
            this.mainData = mainData
            this.getPlayerData()
          }
        } catch (e) {
          this.getData()
        }
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          vm.mainData = rep.data.data
          vm.GLOBAL.setMainData(vm.mainData)
          vm.getPlayerData()
        })
      },
      getPlayerData () {
        let vm = this
        let page = this.players.length / 10 + 1;
        let params = {
          id: this.id,
          page: page,
          page_size: 10,
          result_sort: this.GLOBAL.playSort.SORT_VOTE_NUM_DESC
        }
        getResultPlayers(params).then(rep => {
         vm.players.push(...rep.data.data.list);
         if(vm.players.length===rep.data.data.count){
           vm.more=false;
         }
        })
      }

    }

  }
</script>
